<template>
    <div class="view">
        <android-nav-bar title="添加银行卡" v-on:back="back"></android-nav-bar>
        <div class="box">
            <div class="card-name flex">
                <span class="iconfont icon-xingming"></span>
                <input type="text" placeholder="持卡人真实姓名" v-model="cardName">
            </div>
            <div class="card-name flex" @click="showBanksSel">
                <span class="iconfont icon-xinyongqiahuankuan"></span>
                <input type="text" placeholder="选择银行" v-model="cardType">
            </div>
            <div class="card-name flex">
                <span class="iconfont icon-yinhangqiahao" style="font-size: 15px;"></span>
                <input type="text" placeholder="银行卡号" v-model="cardNumber">
            </div>
            <div class="card-name flex">
                <span class="iconfont icon-zhihang" style="font-size: 18px;"></span>
                <input type="text" placeholder="银行支行" v-model="branch">
            </div>
            <div class="remark">
                注：银行支行为非必填，但为更快的成功转账，建议填写!
            </div>
            <div class="save" @click="save">保存</div>
        </div>

    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineBankCardAdd extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;
        private bankCard = [];
        private picker: any = "";
        private cardType: string = "";
        private cardId: number = 0;
        private cardName: string = "";
        private cardNumber: string = "";
        private branch: string = "";

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private async showBanksSel(): Promise<any> {
            const toast = (<any> this).$createToast({
                time: 0,
                txt: "载入选项中...",
                mask: true
            }).show();
            const result = await Http.get(this.api.getParameterItem, {type: "BANK"});
            if (!this.picker) {
                this.picker = (this as any).$createPicker({
                    title: "选择银行",
                    data: [CommonUnit.resultToPickerData(result.data)],
                    onSelect: this.selectHandle
                });
            }
            toast.hide();
            this.picker.show();
        }

        private selectHandle(selectedVal: any[], selectedIndex: number[], selectedText: string[]): void {
            console.log(selectedVal, selectedIndex, selectedText);
            this.cardType = selectedText.join(",");
            this.cardId = Number(selectedVal.join(","));
        }

        private save(): void {
            let toast = (<any> this).$createToast({
                time: 0,
                txt: "保存中...",
                mask: true
            }).show();
            try {
                Http.post(this.api.bankCard, {card: this.cardNumber, real_name: this.cardName, bank: this.cardType, bank_id: this.cardId, branch: this.branch}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        toast = (<any> this).$createToast({
                            time: 2500,
                            txt: "保存成功，正在更新资料",
                            mask: true,
                            onTimeout: () => {
                                this.navigateBack();
                            }
                        }).show();
                    } else {
                        this.globalSingleResultToast(res);
                    }
                });
            } catch (e) {
                toast.hide();
                console.log(e);
            }
        }

        private mounted(): void {

        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow: hidden;

        .box
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);

            &::before
                display table;
                content '';

            .card-name
                background-color #fff;
                height 50px;
                padding 0 15px;
                border-bottom 1px solid $theme-line-color;

                span
                    display inline-block;
                    width 50px;
                    line-height 45px;
                    font-size 24px;

                input
                    display inline-block;
                    width calc(100vw - 40px - 30px);

            .remark
                padding 15px;
                color $theme-viceColor-font;
                line-height 1.5em;

            .save
                color #fff;
                height 45px;
                line-height 45px;
                text-align center;
                border-radius 200px;
                margin 30px 30px;
                background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));


</style>
